<template>
    <div>
        
        <bi-table :data="list" :loading="loading" min-height="200">
            
            <bi-table-column label="模型名称" name="name" width="250" v-slot="scope">
                {{scope.row.name}}<bi-icon data="fa-file-code-o" style="margin-left: 5px;"  v-if="scope.row.file" ></bi-icon>
            </bi-table-column>
            <bi-table-column label="表名" name="table" width="250">

            </bi-table-column>
            <bi-table-column label="key" name="key" width="150"></bi-table-column>
            <bi-table-column label="comment" name="comment" min-width="200" ></bi-table-column>
            <bi-table-column label="操作" width="60px" v-slot="scope">
               <bi-menu>
                    <bi-menu-item label="删除" @click="del(scope.row)" ></bi-menu-item>
                    <bi-menu-item label="Create SQL" @click="sql(scope.row)" ></bi-menu-item>
                    <bi-menu-item label="添加模型文件"  @click="addFile(scope.row)"  v-if="!scope.row.file"></bi-menu-item>
                </bi-menu>
            </bi-table-column>
        </bi-table>
        <div class="button-list" style="padding-top: 20px;">
            <bi-button icon="fa-plus" type="light" @click="bind" >绑定模型</bi-button>
            <bi-button icon="fa-server" type="light" @click="sync" >同步表结构</bi-button>
            <bi-button icon="fa-refresh" type="light" @click="update" >更新</bi-button>
        </div>
    </div>
</template>

<script>
import bindTableDialog from './bind-table-dialog.vue';
import syncTableDialog from './sync-table-dialog.vue';
import sqlDialog  from './sql-dialog.vue';
export default{
    data(){
        return {
            list:[],
            loading:false
        }
    },
    methods:{
        flash(){
            this.loading = true;
            this.$ajax({
                url:this.$url({controller:'database',action:'modelList'}),
                data:{
                    app:this.app
                },
                success:(data)=>{
                    this.list = data;
                },
                over:()=>{
                    this.loading = false;
                }
            })
        },
        bind(){
            this.$dialog({
                type:'vue',
                content:admin.createApp(bindTableDialog,{app:this.app}),
                callback:()=>{
                    this.flash();
                }
            });
        },
        del(row){

            this.$confirm('确定要删除吗?',()=>{
                this.$ajax({
                    url:this.$url({controller:'database',action:'delModel'}),
                    data:{
                        app:this.app,
                        name:row.name
                    },
                    success:()=>{
                        this.$toast('删除成功');
                        this.flash();
                    }
                })
            });
        },
        addFile(row){
            this.$loading();
            this.$ajax({
                    url:this.$url({controller:'database',action:'addFile'}),
                    data:{
                        app:this.app,
                        name:row.name
                    },
                    success:()=>{
                        this.flash();
                        this.$toast('添加成功');
                       
                    },
                    over:()=>{
                        this.$loading(false);
                    }
                })
        },
        update(){
            this.$ajax({
                url:this.$url({controller:'database',action:'update'}),
                data:{
                    app:this.app,
                },
                success:()=>{
                    this.flash();
                }
            })
        },
        sql(item){
            this.$dialog({
                type:'vue',
                content:admin.createApp(sqlDialog,{app:this.app,modelName:item.name}),
                callback:()=>{
                    this.flash();
                }
            });
        },
        sync(){
            this.$dialog({
                type:'vue',
                content:admin.createApp(syncTableDialog,{app:this.app,modelList:this.list}),
                callback:()=>{
                    this.flash();
                }
            });
        }
    },
    props:{
        app:String
    },
    mounted(){
        this.flash();
    }
}
</script>